<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凑单品</title>
    <link rel="stylesheet/less" href="./asset/less/gsproduct.less">
    <script src="./asset/js/less.js"></script>
    <link rel="stylesheet" href="./asset/fontAwesome/css/font-awesome.min.css">
</head>

<body>
    <!-- 头部部分 -->
    <div class="header">
        <a class="logo" href="index.html">
            <i class="fa fa-angle-left"></i>
        </a>
        <h1>凑单品</h1>
        <a class="download" href="#">
            <img src="./asset/image/download.png" alt="">
        </a>
    </div>

    <!-- 导航部分 -->
    <div class="nav">
        <div class="hd">
            <div class="title">
                <ul>
                    <!-- <i class="fa fa-sort-up "></i>向上箭头 -->
                    <li>
                        <a href="#">京东<i class=" fa fa-sort-down"></i></a>
                    </li>
                    <li>
                        <a href="#">华北<i class=" fa fa-sort-down"></i></a>
                    </li>
                    <li>
                        <a href="#">1元<i class=" fa fa-sort-down"></i></a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <a href="#">
                    <i class="fa fa-reorder"></i>
                </a>
            </div>
        </div>

        <!-- 各种下拉框 -->
        <div class="market downbox ">
            <ul>
                <li><a href="#">京东</a></li>
            </ul>
        </div>
        <div class="area downbox ">
            <ul>
                <li class="on"><a href="#">华北（北京、 山西等）</a>
                </li>
                <li><a href="#">华东（山东、 浙江等）</a></li>
                <li><a href="#">华南（广东、 广西等）</a></li>
                <li><a href="#">华中（湖北、 河南等）</a></li>
                <li><a href="#">西北（宁夏、 新疆等）</a></li>
            </ul>
        </div>
        <div class="price downbox ">
            <ul>
                <li class="on"><a href="#">全部价格</a></li>
                <li><a href="#">1-3元</a></li>
                <li><a href="#">3-5元</a></li>
                <li><a href="#">5-10元</a></li>
                <li><a href="#">10-15元</a></li>
                <li><a href="#">15元以上</a></li>
            </ul>
        </div>
    </div>


    <!-- 商品列表区 -->
    <div class="main clearfix">
        <ul>
            <li>
                <a href="#">
                    <img src="./asset/image/jd.jpg" alt="">
                    <p class="name">精邦 线上 测试请勿使用--定制 白色</p>
                    <p class="price">
                        <span>¥</span>999</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./asset/image/jd.jpg" alt="">
                    <p class="name">精邦 线上 测试请勿使用--定制 白色</p>
                    <p class="price">
                        <span>¥</span>999</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./asset/image/jd.jpg" alt="">
                    <p class="name">精邦 线上 测试请勿使用--定制 白色</p>
                    <p class="price">
                        <span>¥</span>999</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./asset/image/jd.jpg" alt="">
                    <p class="name">精邦 线上 测试请勿使用--定制 白色</p>
                    <p class="price">
                        <span>¥</span>999</p>
                </a>
            </li>
        </ul>
    </div>



</body>
<script src="./asset/zepto/zepto.min.js"></script>
<script src="./asset/artTemplate/template-web.js"></script>

    <!-- 商城区域模板 -->
    <script id="market" type="text/html">
        {{each result value}}
            <li>
                <a href="#" data-shopid="{{value.shopId}}">{{value.shopName}}</a>
            </li>
        {{/each}}
    </script>
 
    <!-- 区域模板 -->
    <script id='area' type="text/html">
        {{each result value}}
            <li>
                <a href="#" data-areaid="{{value.areaId}}">{{value.areaName}}</a>
            </li>
        {{/each}}
    </script>

    <!-- 商品区模板 -->
    <script id="goods" type="text/html">
        {{each result value}}
            <li>
                <a href="#" >
                    <img src="{{value.productImg}}" alt="">
                    <p class="name">{{value.productName}}</p>
                    <p class="price">
                        <span>¥</span>{{value.productPrice}}</p>
                </a>
            </li>
        {{/each}}
    </script>



<script src="./asset/js/url.js"></script>
<script src="./asset/js/gsproduct.js"></script>

</html>